<template>
<view class="preferential">
    <view class="topBG" :style="{ backgroundImage: 'url(' + top_bg + ')' }"></view>
    <view class="activeBox">
        <view class="title" :style="{ backgroundImage: 'url(' + title_bg + ')' }">
            活动奖励
        </view>
        <view class="couponsList">
            <view>
                <view class="bg" :style="{ backgroundImage: 'url(' + icon_jifen + ')' }"></view>
                <view class="tips">1次/月</view>
                免费服务次数
            </view>
            <view>
                <view class="bg" :style="{ backgroundImage: 'url(' + icon_jifen + ')' }"></view>
                <view class="tips">1次/月</view>
                免费服务次数
            </view>
            <view>
                <view class="bg" :style="{ backgroundImage: 'url(' + icon_jifen + ')' }"></view>
                <view class="tips">1次/月</view>
                免费服务次数
            </view>
        </view>
        <view class="midtips">
            <view class="left_line"></view>
            30元优惠券包含
            <view class="right_line"></view>
        </view>
        <view class="cashCouponList">
            <view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
                <view>现金券</view>
                <view>￥10</view>
                <view>满200可用</view>
            </view>
            <view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
                <view>现金券</view>
                <view>￥10</view>
                <view>满200可用</view>
            </view>
            <view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
                <view>现金券</view>
                <view>￥10</view>
                <view>满200可用</view>
            </view>
        </view>
        <view class="line"></view>
        <view class="bottom_tips">注：奖励数量有限，送完即止</view>
    </view>
    <view class="activityDes">
        <view class="activityTitle">活动规则</view>
        <view class="activityLine"></view>
        <view class="activityContent">
            <view>
                <view>
                    <u-icon name="calendar" color="#606266" size="40"></u-icon>
                </view>
                <view>活动期限</view>
                <view>2022.5.5-2022.6.5</view>
            </view>
            <view>
                <view>
                    <u-icon name="clock" color="#606266" size="36"></u-icon>
                </view>
                <view>活动时间段</view>
                <view>8:00-12:00, 13:00-18:00</view>
            </view>
            <view>
                <view>
                    <u-icon name="account" color="#606266" size="40"></u-icon>
                </view>
                <view>适用用户</view>
                <view>受邀用户</view>
            </view>
        </view>
    </view>
    <view class="activityDes">
        <view class="activityTitle">活动说明</view>
        <view class="activityLine"></view>
        <view class="activityContent">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Quis ipsum suspendisse ultrices gravida.
            Risus commodo viverra maecenas accumsan lacus vel facilisis.
        </view>
    </view>
    <view style="width: 100%;height: 150rpx;"></view>
    <view class="bottom_button">
        <view class="share">
            <u-icon name="share-square" color="#909399" size="32"></u-icon>
            <view>分享</view>
        </view>
		<view class="button" :style="{backgroundColor:defaultColor}" @click="goVerify">去认证</view>
        <!-- <view class="button" :style="{backgroundColor:defaultColor}">领取奖励</view> -->
    </view>
</view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            defaultColor: uni.getStorageSync('defaultColor_Green'),
            top_bg: app.globalData.imgUrl+'/group1/operateSchemeImage/image/authentication/banner.png',
            title_bg: app.globalData.imgUrl+'/group1/operateSchemeImage/image/authentication/title_bg.png',
            redBg: app.globalData.imgUrl+'/group1/operateSchemeImage/image/authentication/Red-bg.png',
            icon_jifen: app.globalData.imgUrl+'/group1/operateSchemeImage/image/authentication/icon_jifen.png',
            icon_mianfuwucishu:app.globalData.imgUrl+'/group1/operateSchemeImage/image/authentication/icon_mianfuwucishu.png',
            icon_youhuiquan: app.globalData.imgUrl+'/group1/operateSchemeImage/image/authentication/icon_youhuiquan.png',
			
        };
    },
    mounted() {
        console.log('defaultColor_Green', uni.getStorageSync('defaultColor_Green'))
        console.log('defaultColor', this.defaultColor)
    },
    methods: {
		//去认证
		goVerify(){
			uni.navigateTo({
				url: "/mine/pages/addCar/addCar"
			})
		}
	}
};
</script>

<style lang="less" scoped>
.preferential {
    width: 100%;
    min-height: 100vh;
    background: #F2F3F5;
}

.topBG {
    width: 100%;
    height: 420rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.activeBox {
    width: 94%;
    margin: 24rpx auto;
    background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 2rpx solid #FFFFFF;
    padding: 0rpx;
    box-sizing: border-box;

    .title {
        width: 240rpx;
        height: 64rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        margin: -10rpx auto;
        text-align: center;
        font-size: 34rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 64rpx;
    }

    .line {
        width: 100%;
        height: 1rpx;
        background-color: #DCDFE6;
    }

    .bottom_tips {
        width: 100%;
        height: 84rpx;
        line-height: 84rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #606266;
        padding: 0 32rpx;
        box-sizing: border-box;
    }
}

.couponsList {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 40rpx auto;
    line-height: 60rpx;
    padding: 0 32rpx;
    box-sizing: border-box;

    >view {
        width: 30%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #606266;
        text-align: center;

        .bg {
            width: 100rpx;
            height: 100rpx;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
        }

        .tips {
            min-width: 90rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            background: #F7A14A;
            border-radius: 16rpx 16rpx 16rpx 0rpx;
            opacity: 1;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 24rpx;
            font-weight: 400;
            color: #FFFFFF
        }
    }
}

.midtips {
    width: 100%;
    margin: 24rpx auto;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #C19C68;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .left_line {
        flex: 1;
        height: 2rpx;
        background: linear-gradient(319deg, #E3BE87 0%, #F4D9AE 55%, rgba(244, 217, 174, 0) 95%, rgba(244, 217, 174, 0) 100%);
        opacity: 1;
        margin-right: 20rpx;
    }

    .right_line {
        margin-left: 20rpx;
        flex: 1;
        height: 2rpx;
        height: 2rpx;
        background: linear-gradient(-319deg, #E3BE87 0%, #F4D9AE 55%, rgba(244, 217, 174, 0) 95%, rgba(244, 217, 174, 0) 100%);
        opacity: 1;
        opacity: 1;
    }
}

.cashCouponList {
    width: 90%;
    margin: 50rpx auto;
    border-radius: 10rpx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

.cashCouponItem {
    width: 137rpx;
    height: 142rpx;
    margin: 0 24rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    >view:nth-of-type(1) {
        color: #a26d35;
        font-size: 20rpx;
    }

    >view:nth-of-type(2) {
        color: #f0703e;
        font-size: 22rpx;
        font-weight: 600;
    }

    >view:nth-of-type(3) {
        color: #fad9b1;
        font-size: 22rpx;
    }
}

.activityDes {
    width: 94%;
    margin: 16rpx auto;
    background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 2rpx solid #FFFFFF;
    padding: 32rpx;
    box-sizing: border-box;
}

.activityTitle {
    width: 100%;
}

.activityLine {
    width: 100%;
    height: 1rpx;
    margin: 30rpx 0;
    background-color: #dcdfe6;
}

.activityContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    >view {
        width: 100%;
        line-height: 60rpx;
        font-size: 28rpx;
        color: #606266;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        >view:nth-of-type(1) {
            width: 60rpx;
        }

        >view:nth-of-type(2) {
            width: 150rpx;
        }

        >view:nth-of-type(3) {
            margin-left: 20rpx;
            color: #303133;
        }
    }
}

.bottom_button {
    width: 100%;
    height: 120rpx;
    background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
    box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.549);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .share {
        width: 128rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #606266;
    }

    .button {
        width: 80%;
        height: 88rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        color: #fff;
        text-align: center;
        line-height: 88rpx;
    }
}
</style>
